<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom:20px;font-size:14px;">
      <el-breadcrumb-item :to="{ path: '/govmain' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>审核完成</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="border-card">
      <el-tab-pane label="审核完成">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input v-model="agency_name" placeholder="输入单位名称"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input v-model="licence" placeholder="输入许可证号"></el-input>
          </el-col>
          <template v-if="userinfo.regionInfo.group_level === 0">
            <el-col :span="4">
            <el-select v-model="pro" clearable placeholder="省份" @change="getCitiesOfProvince">
              <el-option
                v-for="item in provinces"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="city" clearable placeholder="城市" @change="getAreasOfCity">
              <el-option
                v-for="item in cities"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="area" clearable placeholder="区/县">
              <el-option
                v-for="item in areas"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
            </template>    
            <template v-else-if="userinfo.regionInfo.group_level === 1">
          <el-col :span="4">
            <el-select v-model="city" clearable placeholder="城市" @change="getAreasOfCity">
              <el-option
                v-for="item in cities"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="area" clearable placeholder="区/县">
              <el-option
                v-for="item in areas"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
            </template> 
            <template v-else>
          <el-col :span="4">
            <el-select v-model="area" clearable placeholder="区/县">
              <el-option
                v-for="item in areas"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
            </template> 
          <el-col :span="2">
            <el-button type="primary" icon="search" @click="searchNoFill()">搜索</el-button>
          </el-col>
          <el-col :span="2" style="margin-left:-10px;" v-if="false">
            <el-button type="danger" @click="handleClickGoData">数据分析</el-button>
          </el-col>
        </el-row>
        <div style="padding-top:10px;" >
          <el-table :data="agencyList.rows" border  style="width: 100%;" :fit="true" v-loading="loading" element-loading-text="数据加载中，请稍后...">
            <el-table-column prop="licence" header-align="center" align="center" label="许可证编号">
            </el-table-column>
            <el-table-column prop="cName" header-align="center" align="center" label="单位名称">
            </el-table-column>
            <el-table-column prop="tele" header-align="center" width="150"  align="center" label="电话" >
            </el-table-column>
            <template v-if="userinfo.regionInfo.group_level === 0">
              <el-table-column  header-align="center"  align="center" width="120" label="省局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.provinceState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.provinceState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column  header-align="center"  align="center" width="120" label="市局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.cityState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.cityState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column header-align="center"  align="center" width="120" label="县局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.countryState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.countryState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
            </template>
            <template v-if="userinfo.regionInfo.group_level === 1">
              <el-table-column  header-align="center"  align="center" width="120" label="省局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.provinceState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.provinceState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column  header-align="center"  align="center" width="120" label="市局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.cityState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.cityState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column header-align="center"  align="center" width="120" label="县局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.countryState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.countryState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
            </template>
            <template v-if="userinfo.regionInfo.group_level === 2">
              <el-table-column  header-align="center"  align="center" width="120" label="省局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.provinceState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.provinceState === 3" type="danger">退回重填</el-tag>
                 <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column  header-align="center"  align="center" width="120" label="市局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.cityState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.cityState === 3" type="danger">退回重填</el-tag>
                </template>
              </el-table-column>
              <el-table-column header-align="center"  align="center" width="120" label="县局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.countryState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.countryState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
            </template>
            <template v-if="userinfo.regionInfo.group_level === 3">
              <el-table-column header-align="center"  align="center" width="120" label="县局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.countryState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.countryState === 3" type="danger">退回重填</el-tag>
                </template>
              </el-table-column>
            </template>
            <el-table-column label="查看" header-align="center" align="center" width="80">
              <template slot-scope="scope">
                <el-button type="text" @click="handleClickReview(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="审核记录" header-align="center" align="center" width="80">
              <template slot-scope="scope">
                <el-button type="text" @click="handleClickReviewResult(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="float:right;">
            <el-col :span="24" style="padding-top:30px;float:right;">
              <el-pagination
                :page-size="50"
                @current-change="handlePageSizeChange"
                layout="total, prev, pager, next"
                :total="agencyList.count">
              </el-pagination>
            </el-col>
          </el-row>
        </div>

      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogTableVisible" >
      <div slot="title" style="text-align: center">
        查看旅行社季报详情
      </div>
      <v-view-report :showaudit="auditState" :reportId="propReportId" @hideDialog="hideDialog"></v-view-report>
    </el-dialog>
    <el-dialog :visible.sync="showReviewResults" title="查看审核记录"  width="70%" center>
        <el-table
          border
          :data="records"
          style="width: 100%">
          <el-table-column
            align="center"
            prop="createdAt"
            label="审核日期"
            width="100">
          </el-table-column>
          <el-table-column
          align="center"
            prop="operateOpinion"
            label="审核内容">
          </el-table-column>
          <el-table-column
            align="center"
            label="审核状态"
            width="100">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.operateType === '通过'" type="success">通过</el-tag>
                <el-tag v-else type="danger">不通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="operatorName"
            label="审核单位"
            width="200">
          </el-table-column>
          <el-table-column
            align="center"
            prop="operatorPhone"
            label="审核账号"
            width="120">
          </el-table-column>
        </el-table>
    </el-dialog>

  </div>
</template>
<script>
import vViewReport from "./ViewReport.vue";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    vViewReport
  },
  created() {
    this.loading = true;
    const data = {
      params :{
        region_id:this.userinfo.regionInfo.area_code,
        state:2
      },
      pageNum:1
    }
    this.$nextTick(() => {
      this.getAreaCodeArray();
      this.getAgencylist(data).then(()=>{
          this.loading = false;
      },(error)=>{
        this.$message.error(error.errorMessage);
      })
    });
  },
  computed: {
    ...mapGetters(["userinfo", "agencyList"])
  },
  data() {
    return {
      dialogTableVisible: false,
      showReviewResults: false,
      loading: false,
      auditState: true,
      provinces: [],
      cities: [],
      areas: [],
      pro: "",
      city: "",
      area: "",
      agency_name: "",
      licence: "",
      region_id: "",
      currentPage: 1,
      propName: "",
      propLicenseNo: "",
      propReportId: 0,
      records:[],
    };
  },
  methods: {
    ...mapActions(["getGovReportDetailForId", "getAgencylist"]),
    handlePageSizeChange(val) {
      this.currentPage = val;
      this.searchNoFill();
    },
    handleClickGoData() {
      this.$router.push("/govdata");
    },
    hideDialog() {
      this.dialogTableVisible = false;
      this.searchNoFill();
    },
    handleClickReview(row) {
       this.getGovReportDetailForId(row.reportid).then(() => {
        this.dialogTableVisible = true;
        this.auditState = false;
        this.propReportId = row.reportid;
      },(error) => {
        this.$message.error(error.errorMessage);
      });
    },
    handleClickReviewResult(row) {
      new Promise((resolve, reject) => {
        this.$http.fetchGet("/gov/oplogs/" + row.reportid).then(
          response => {
            this.records = response.data;
            this.showReviewResults = true;
            resolve(response);
          },
          error => {
            this.$message.error(error.errorMessage);
            reject(error);
          }
        );
      });
      
    },
    getAreasOfCity(val) {
      this.area = "";
      const _this = this;
      new Promise((resolve, reject) => {
        this.$http.fetchGet("/gov/area/" + val).then(
          response => {
            _this.areas = response.data.result.list;
          },
          response => {
            reject(response);
          }
        );
      });
    },
    getCitiesOfProvince(val) {
      this.city = "";
      this.area = "";
      const _this = this;
      new Promise((resolve, reject) => {
        this.$http.fetchGet("/gov/area/" + val).then(
          response => {
            if (
              _this.pro === "110000" ||
              _this.pro === "120000" ||
              _this.pro === "310000" ||
              _this.pro === "500000"
            ) {
              _this.provinces.map(item => {
                if (item.id === _this.pro) {
                  this.cities.push(item);
                }
              });
            } else {
              _this.cities = response.data.result.list;
            }
          },
          response => {
            reject(response);
          }
        );
      });
    },
    getAreaCodeArray() {
      const _this = this;
      new Promise((resolve, reject) => {
        this.$http
          .fetchGet("/gov/area/" + _this.userinfo.regionInfo.area_code)
          .then(
            response => {
              if (_this.userinfo.regionInfo.group_level === 0) {
                _this.provinces = response.data.result.list;
              } else if (_this.userinfo.regionInfo.group_level === 1) {
                _this.cities = response.data.result.list;
              } else {
                _this.areas = response.data.result.list;
              }
            },
            response => {
              reject(response);
            }
          );
      });
    },
    searchNoFill(page) {
      this.loading = true;
      switch (this.userinfo.regionInfo.group_level) {
        case 0:
          if (this.pro !== "" && this.city === "" && this.area === "") {
            this.region_id = this.pro;
          } else if (this.pro !== "" && this.city !== "" && this.area === "") {
            this.region_id = this.city;
          } else {
            this.region_id = this.area;
          }
          break;
        case 1:
          if (this.city !== "" && this.area === "") {
            this.region_id = this.city;
          } else {
            this.region_id = this.area;
          }
          break;
        case 2:
          if (this.area !== "") {
            this.region_id = this.area;
          }
      }
      const data = {
        params: {
          region_id: this.region_id === "" ? this.userinfo.regionInfo.area_code : this.region_id, 
          agency_name:  this.agency_name,
          licence:  this.licence,
          state: 2
        },
        pageNum: this.currentPage
      };
      this.getAgencylist(data).then(() => {
        setTimeout(() => {
          this.loading = false;
        }, 500);
      },error => {
        this.$message.error(error.errorMessage);
      });
    }
  }
};
</script>
<style></style>
